<html>
<head>
<title>jQuery Responsiveness 0.1 Demo</title>
</head>
<body>
<link type="text/css" rel="stylesheet" href="/static/css/SyntaxHighlighter.css"></link>
<script class='javascript' src='http://programmingdrunk.com/static/js/syntaxhighlighter/shCore.js'></script>
<script class='javascript' src='http://programmingdrunk.com/static/js/syntaxhighlighter/shLegacy.js'></script>
<script class='javascript' src='http://programmingdrunk.com/static/js/syntaxhighlighter/shBrushJava.js'></script>

<script class='javascript' src='http://programmingdrunk.com/static/js/syntaxhighlighter/shBrushSql.js'></script>
<script class='javascript' src='http://programmingdrunk.com/static/js/syntaxhighlighter/shBrushXml.js'></script>
<script class='javascript' src='http://programmingdrunk.com/static/js/syntaxhighlighter/shBrushJScript.js'></script>
<script class='javascript' src='http://programmingdrunk.com/static/js/syntaxhighlighter/shBrushPerl.js'></script>
<script class='javascript' src='http://programmingdrunk.com/static/js/syntaxhighlighter/shBrushGroovy.js'></script>
<script class='javascript' src='http://programmingdrunk.com/static/js/syntaxhighlighter/shBrushCss.js'></script>
<script class='javascript' src='http://programmingdrunk.com/static/js/syntaxhighlighter/shBrushDiff.js'></script>
<script class='javascript' src='http://programmingdrunk.com/static/js/syntaxhighlighter/shBrushPlain.js'></script>

<style>
/* SYNTAX HIGHLIGHTER THEME: RDARK */
/************************************
* Interface elements.
************************************/
/**
* SyntaxHighlighter
* http://alexgorbatchev.com/
*
* @version
* 2.0.287 (February 06 2009)
*
* @author
* Alex Gorbatchev
*
* @copyright
* Copyright (C) 2004-2009 Alex Gorbatchev.
*
* Licensed under a GNU Lesser General Public License.
* http://creativecommons.org/licenses/LGPL/2.1/
*
* SyntaxHighlighter is donationware. You are allowed to download, modify and distribute
* the source code in accordance with LGPL 2.1 license, however if you want to use
* SyntaxHighlighter on your site or include it in your product, you must donate.
* http://alexgorbatchev.com/wiki/SyntaxHighlighter:Donate
*/
.syntaxhighlighter,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter span,
.syntaxhighlighter .bold,
.syntaxhighlighter .italic,
.syntaxhighlighter .line,
.syntaxhighlighter .line .number,
.syntaxhighlighter .line .content,
.syntaxhighlighter .line .content .block,
.syntaxhighlighter .line .content .spaces,
.syntaxhighlighter .bar,
.syntaxhighlighter .ruler,
.syntaxhighlighter .toolbar,
.syntaxhighlighter .toolbar a,
.syntaxhighlighter .toolbar a:hover
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
background: none;
text-align: left;
float: none;
vertical-align: baseline;
position: static;
left: auto;
top: auto;
right: auto;
bottom: auto;
height: auto;
width: auto;
line-height: normal;
font-family: "Consolas", "Monaco", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
font-weight: normal;
font-style: normal;
font-size: 100%;
}
.syntaxhighlighter
{
width: 100%;
margin: 1em 0 1em 0;
padding: 1px; /* adds a little border on top and bottom */
position: relative;
}
.syntaxhighlighter .bold {
font-weight: bold;
}
.syntaxhighlighter .italic {
font-style: italic;
}
.syntaxhighlighter .line .number
{
float: left;
width: 3em;
padding-right: .3em;
text-align: right;
display: block;
}
/* Disable numbers when no gutter option is set */
.syntaxhighlighter.nogutter .line .number
{
display: none;
}
.syntaxhighlighter .line .content
{
margin-left: 3.3em;
padding-left: .5em;
display: block;
}
.syntaxhighlighter .line .content .block
{
display: block;
padding-left: 1.5em;
text-indent: -1.5em;
}
.syntaxhighlighter .line .content .spaces
{
display: none;
}
/* Disable border and margin on the lines when no gutter option is set */
.syntaxhighlighter.nogutter .line .content
{
margin-left: 0;
border-left: none;
}
.syntaxhighlighter .bar
{
}
.syntaxhighlighter.collapsed .bar
{
}
.syntaxhighlighter.nogutter .ruler
{
margin-left: 0;
padding-left: 0;
}
.syntaxhighlighter .ruler
{
padding: 0 0 .5em .5em;
margin-left: 3.3em;
overflow: hidden;
}
/* Adjust some properties when collapsed */
.syntaxhighlighter.collapsed .lines,
.syntaxhighlighter.collapsed .ruler
{
display: none;
}
/* Styles for the toolbar */
.syntaxhighlighter .toolbar
{
position: absolute;
right: 0px;
top: 0px;
font-size: 1px;
padding: 8px 8px 8px 0; /* in px because images don't scale with ems */
}
.syntaxhighlighter.collapsed .toolbar
{
font-size: 80%;
padding: .2em 0 .5em .5em;
position: static;
}
.syntaxhighlighter .toolbar a.item,
.syntaxhighlighter .toolbar .item
{
display: block;
float: left;
margin-left: 8px;
background-repeat: no-repeat;
overflow: hidden;
text-indent: -5000px;
}
.syntaxhighlighter.collapsed .toolbar .item
{
display: none;
}
.syntaxhighlighter.collapsed .toolbar .item.expandSource
{
background-image: url(http://programmingdrunk.com/static/css/magnifier.png);
display: inline;
text-indent: 0;
width: auto;
float: none;
height: 16px;
padding-left: 20px;
}
.syntaxhighlighter .toolbar .item.viewSource
{
background-image: url(http://programmingdrunk.com/static/css/page_white_code.png);
}
.syntaxhighlighter .toolbar .item.printSource
{
background-image: url(http://programmingdrunk.com/static/css/printer.png);
}
.syntaxhighlighter .toolbar .item.copyToClipboard
{
text-indent: 0;
background: none;
overflow: visible;
}
.syntaxhighlighter .toolbar .item.about
{
background-image: url(http://programmingdrunk.com/static/css/help.png);
}
/**
* Print view.
* Colors are based on the default theme without background.
*/
.syntaxhighlighter.printing,
.syntaxhighlighter.printing .line.alt1 .content,
.syntaxhighlighter.printing .line.alt2 .content,
.syntaxhighlighter.printing .line.highlighted .number,
.syntaxhighlighter.printing .line.highlighted.alt1 .content,
.syntaxhighlighter.printing .line.highlighted.alt2 .content,
.syntaxhighlighter.printing .line .content .block
{
background: none;
}
/* Gutter line numbers */
.syntaxhighlighter.printing .line .number
{
color: #bbb;
}
/* Add border to the lines */
.syntaxhighlighter.printing .line .content
{
color: #000;
}
/* Toolbar when visible */
.syntaxhighlighter.printing .toolbar,
.syntaxhighlighter.printing .ruler
{
display: none;
}
.syntaxhighlighter.printing a
{
text-decoration: none;
}
.syntaxhighlighter.printing .plain,
.syntaxhighlighter.printing .plain a
{
color: #000;
}
.syntaxhighlighter.printing .comments,
.syntaxhighlighter.printing .comments a
{
color: #008200;
}
.syntaxhighlighter.printing .string,
.syntaxhighlighter.printing .string a
{
color: blue;
}
.syntaxhighlighter.printing .keyword
{
color: #069;
font-weight: bold;
}
.syntaxhighlighter.printing .preprocessor
{
color: gray;
}
.syntaxhighlighter.printing .variable
{
color: #a70;
}
.syntaxhighlighter.printing .value
{
color: #090;
}
.syntaxhighlighter.printing .functions
{
color: #ff1493;
}
.syntaxhighlighter.printing .constants
{
color: #0066CC;
}
.syntaxhighlighter.printing .script
{
font-weight: bold;
}
.syntaxhighlighter.printing .color1,
.syntaxhighlighter.printing .color1 a
{
color: #808080;
}
.syntaxhighlighter.printing .color2,
.syntaxhighlighter.printing .color2 a
{
color: #ff1493;
}
.syntaxhighlighter.printing .color3,
.syntaxhighlighter.printing .color3 a
{
color: red;
}
.syntaxhighlighter
{
background-color: #1B2426;
}
/* Highlighed line number */
.syntaxhighlighter .line.highlighted .number
{
background-color: #435A5F;
color: #fff;
}
/* Highlighed line */
.syntaxhighlighter .line.highlighted .content
{
background-color: #435A5F !important;
}
/* Gutter line numbers */
.syntaxhighlighter .line .number
{
color: #B9BDB6;
}
/* Add border to the lines */
.syntaxhighlighter .line .content
{
border-left: 3px solid #435A5F;
color: #B9BDB6;
}
.syntaxhighlighter.printing .line .content
{
border: 0;
}
/* First line */
.syntaxhighlighter .line.alt1 .content
{
background-color: #1B2426;
}
/* Second line */
.syntaxhighlighter .line.alt2 .content
{
background-color: #1B2426;
}
.syntaxhighlighter .line .content .block
{
background: url(http://programmingdrunk.com/static/css/wrapping.png) 0 1.1em no-repeat;
}
.syntaxhighlighter .ruler
{
color: silver;
background-color: #1B2426;
border-left: 3px solid #435A5F;
}
.syntaxhighlighter.nogutter .ruler
{
border: 0;
}
.syntaxhighlighter .toolbar
{
background-color: #1B2426;
}
.syntaxhighlighter .toolbar a
{
color: #646763;
}
.syntaxhighlighter .toolbar a:hover
{
color: #E0E8FF;
}
/************************************
* Actual syntax highlighter colors.
************************************/
.syntaxhighlighter .plain,
.syntaxhighlighter .plain a
{
color: #B9BDB6;
}
.syntaxhighlighter .comments,
.syntaxhighlighter .comments a
{
color: #878A85;
}
.syntaxhighlighter .string,
.syntaxhighlighter .string a
{
color: #5CE638;
}
.syntaxhighlighter .keyword
{
color: #5BA1CF;
}
.syntaxhighlighter .preprocessor
{
color: #435A5F;
}
.syntaxhighlighter .variable
{
color: #FFAA3E;
}
.syntaxhighlighter .value
{
color: #090;
}
.syntaxhighlighter .functions
{
color: #FFAA3E;
}
.syntaxhighlighter .constants
{
color: #E0E8FF;
}
.syntaxhighlighter .script
{
background-color: #435A5F !important;
}
.syntaxhighlighter .color1,
.syntaxhighlighter .color1 a
{
color: #E0E8FF;
}
.syntaxhighlighter .color2,
.syntaxhighlighter .color2 a
{
color: #FFFFFF;
}
.syntaxhighlighter .color3,
.syntaxhighlighter .color3 a
{
color: #FFAA3E;
}
</style>


<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.responsiveness-0.1.js"></script>
<script type="text/javascript">

var numQ = 0;
var num = 0;

$(function(){
  	reset();
  	hi();
  	SyntaxHighlighter.config.bloggerMode = true;
	SyntaxHighlighter.config.clipboardSwf = 'http://programmingdrunk.com/static/js/syntaxhighlighter/clipboard.swf'
	dp.SyntaxHighlighter.HighlightAll("code");
	SyntaxHighlighter.all();


});

function reset(){
	$("#inp").unbind("keyup");

	var conf = {"interval":parseInt($("#interval").val(), 10), "times": parseInt($("#times").val(), 10)};

	var queue = $.getResponsiveness(conf);

	$("#inp").keyup(function(e){
		var f1 = function(key){
			num++;
			$("#obj1").html("last key: "+ key +" function calls --> "+num);
		}
		var f2 = function(key){
			numQ++;
			$("#obj2").html("last key: "+ String.fromCharCode(e.keyCode)+" function calls --> "+numQ);
		}
		f1(String.fromCharCode(e.keyCode));
		queue.run(f2, [String.fromCharCode(e.keyCode)]);
	});
	numQ = 0;
	num = 0;
	$("#inp").val("");
	$("#obj1").html("ready");
	$("#obj2").html("ready");
}
function hi(){
	//crappy hover intent clone
	var queue = $.getResponsiveness({interval:100, times:5});
	var count = 0;
	$("#hoverIntent").mousemove(function(){
		var expensiveFunction = function(q){
			count++;
			$("#hoverIntent").html("hover detected, do something fancy. count="+count);
			q.disable();
		}
		queue.run(expensiveFunction,[queue]); //pass in the queue for fun
	}).mouseout(function(){
		queue.disable();
		$("#hoverIntent").html("hover mouse over me");
	}).mouseover(function(){
		queue.enable();
	});
}
</script>
This is the demo of the jQuery responsiveness v0.1 plugin. Get the latest version <a href="jquery.responsiveness-0.1.js">here</a>.<br/><br/>
The point of this demo is to show that the plugin only calls the function once when the user finishes typing into the box. Imaging that each time the user
typed a key, a really expensive function needed to be called, but it only _really_ needed to be called once, at the end.<br/><br/>
You can use this plugin to split up the UI updates from the expensive processing needed in the background, and make the UI look very responsive.
I wrote a blog about this plugin <a href="http://notetodogself.blogspot.com/2008/12/jquery-responsiveness-plugin-for-fast.html">here</a>
<hr/>
<br/><br/>
interval (ms):<input type="text" id='interval' value="100"/><br/>
number of checks before calling function:<input type="text" id='times' value="5"/></br>
<a href="javascript:reset()">click this to use above values</a><br/><br/>
<b>type really fast into here using a bunch of keys:</b><input type="text" id='inp' value=""/>


<br/>
Called on every key press:<div id="obj1" style="background-color:red">ready</div>
Called on every key press using plugin:<div id="obj2" style="background-color:green">ready</div>
<br/><br/>
<hr>
Now for something different, here is a <a href="http://cherne.net/brian/resources/jquery.hoverIntent.html">hoverIntent</a> "like" implementation using this plugin. It does not poll the
mouseover event, it does not use the mouse x and y position. it will check if a mouseMove was detected in the last 500ms, and run some function. if you mouseOut, the process starts all over again. Granted,
it does not work exactly how hoverIntent works, but it could be tweaked to check the speed of mousemove firing, and then we could implement hoverIntent fully.
<br/>
<div id="hoverIntent" style="width:200px; height:200px; background-color:green; padding:10px; clear:both">hover mouse over me</div>

<div>
Here is the code that drives this implementation:
<textarea name="code" class="javascript">
//crappy hover intent clone
var queue = $.getResponsiveness({interval:100, times:5});
var count = 0;
$("#hoverIntent").mousemove(function(){
	var expensiveFunction = function(q){
		count++;
		$("#hoverIntent").html("hover detected, do something fancy. count="+count);
		q.disable();
	}
	queue.run(expensiveFunction,[queue]); //pass in the queue for fun
}).mouseout(function(){
	queue.disable();
	$("#hoverIntent").html("hover mouse over me");
}).mouseover(function(){
	queue.enable();
});
</textarea>

<hr>
API:<br/>
var r = $.getResponsiveness({interval:100, times:5}):<br/>
* create a new responsiveness object instance, which checks for new function calls every 100ms, and if no new function calls happened for 5 such checks, fires last function call.
<br/><br/>
r.run(fn, args, context):<br/>
* use above instance to run a function. context is optional, if none is provided, window is used. args is an array of aruments to function fn.
<br/><br/>
r.disable():<br/>
* stop the internal timer, run() function no longer does anything.
<br/><br/>
r.enable():<br/>
* if object was disabled, this will enable it, run() works as described.
<br/><br/>
r.reset():<br/>
* resets the internal timer. no more functions will be fired until one more run() is called.
</div>
</body>
</html>